import React, { Component } from 'react';
import { Table, message, Divider, Pagination, Button } from 'antd';
import local from '../localData';
import MySearch from '../component/mySearch';
class TableModule extends Component {
    constructor(props) {
        super(props)
        this.state = {
            pageNum: 1,
            pageSize: 10,
            loading: true,
            tableInfo: [],
            rowSelect: [],/* 多选内容ID集合 */
        }
    }
    componentDidMount() {
        this.pageInfo()
    }
    componentWillReceiveProps() {
        //console.log('刷新页面数据', this.props)
        this.setState({ tableInfo: [], loading: false })
    }
    pageInfo = () => {
        // 发送请求
        // import http from '../api/http';
        // http.get('operatelogs', 'ADMINUSER').then(res => {
        //     this.setState({ logList: res.data, loading: false })
        // })
        // 拿到本地数据
        this.setState({
            tableInfo: local.logList.data,
            loading: false
        })
    }
    /* 查询 */
    searchBack = (info) => {
        console.log(info)
    }
    // 多选之后的操作
    searchPopup = (info) => {
        if (info.type === 'rowDelect') {
            message.success('删除事件')
        } else {
            this.props.tableBack(info.type, this.state.rowSelect)
        }
    }
    /* 数据操作 */
    actionTable = (type, value) => {
        if (type === 'delect') {
            message.success('删除操作 ID' + value.id)
        } else {
            this.props.tableBack(type, value)
        }
    }
    /* 分页数据处理 */
    numChange = (info) => {
        console.log(info)
    }
    sizeChange = (current, size) => {
        console.log(size)
    }
    /* table columns */
    columns = () => {
        let tableInfo = this.props.info
        const edit = [{
            title: '操作', dataIndex: 'infsf', render: (text, record) =>
                <span style={{ color: '#249CF9' }} className='cursor-pnt'>
                    {tableInfo.tableEdit ?
                        <div className='flexfs'>
                            {tableInfo.tableEdit.map((item, idx) => {
                                return (
                                    <div key={idx}>
                                        <span onClick={this.actionTable.bind(this, item.key, record)}>{item.label}</span><Divider type="vertical" />
                                    </div>
                                )
                            })}
                        </div>
                        :
                        <div>
                            <span onClick={this.actionTable.bind(this, 'update', record)}>修改</span>
                            <Divider type="vertical" />
                            <span onClick={this.actionTable.bind(this, 'delect', record)}>删除</span>
                        </div>
                    }
                </span>,
        }]
        let columns = tableInfo.columns.concat(edit)
        let idColumn = { title: 'ID', dataIndex: 'id', align: 'center' }
        columns.unshift(idColumn);
        return columns;
    }
    render() {
        let tableInfo = this.props.info
        /* 多选 */
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                var rowSelect = [];
                for (let item of selectedRows) { rowSelect.push(item.id) }
                this.setState({ rowSelect: rowSelect })
            }
        };
        return (
            <div>
                <MySearch info={this.props.info.search} Back={this.searchBack}></MySearch>
                {tableInfo.btn &&
                    <div className='wt100 flexfs' style={{ height: '50px' }}>
                        {tableInfo.btn.map((item, idx) => {
                            return (
                                <Button key={idx} type="primary" style={{ marginLeft: '10px' }} onClick={this.searchPopup.bind(this, item)}>{item.label}</Button>
                            )
                        })}
                    </div>
                }
                <Table rowSelection={rowSelection} size="small" bordered rowKey={(record, index) => index} columns={this.columns()} dataSource={this.state.tableInfo.list} loading={this.state.loading} pagination={{ position: 'none' }}></Table>
                <div className='flexlb' style={{ width: '100%', height: '50px' }}>
                    <div></div>
                    <Pagination size="small" defaultPageSize={this.state.pageSize} total={this.state.tableInfo.count} showSizeChanger showQuickJumper onChange={this.numChange} onShowSizeChange={this.sizeChange} />
                </div>
            </div>
        )
    }
}
export default TableModule;